<template>
  <div class="comment" :id="newsId">
    <div class="submitbox">
      <h3>提交评论</h3>
      <div class="inputbox">
        <mt-field placeholder="请输入评论内容" v-model="content" type="textarea" rows="4"></mt-field>
        <mt-button size="small" type="primary" plain @click="handlePublic">发表</mt-button>
      </div>
    </div>
    <div class="commentbox">
      <!-- 评论标题 -->
      <h3 class="line">评论详情</h3>
      <!-- 具体评论内容 -->
      <ul>
        <li v-for="(comment,index) in commentList" :key="index">
          <h4 class="comment-content">{{comment.content}}</h4>
          <p>
            <span class="comment-user">{{comment.user_name}}</span>
            <span class="comment-time">{{comment.add_time | handleTime}}</span>
          </p>
        </li>
      </ul>
    </div>
    <div class="button-group">
      <mt-button size="large" type="primary" @click="loadMore" v-if="moreButton">加载更多</mt-button>
      <mt-button size="large" type="danger" disabled v-else="!moreButton">没有更多了</mt-button>
    </div>
  </div>
</template>

<script>
// 引入封装好的请求函数
import { getComments, publicComment } from '@/api'
// 引入mint-ui中的Toast弹框提示模块
import { Toast } from 'mint-ui'
// 引入qs => 转化参数格式
var qs = require('qs')

export default {
  // 接收父组件传值
  props: ['newsId'],
  // 数据
  data () {
    return {
      // 评论内容
      content: '',
      // 评论列表当前页
      pageindex: 1,
      // 评论列表
      commentList: [],
      // 加载更多按钮的显示状态
      moreButton: true

    }
  },
  created () {
    // console.log(this.newsId)
    /* 初始化评论列表 */
    this.initComments()
  },
  methods: {
    /* 初始化评论列表 */
    initComments () {
      getComments(this.newsId, this.pageindex).then(res => {
        if (res.status === 0) {
          this.commentList = res.message
        }
      })
    },
    /* 加载更多 */
    loadMore () {
      // 先存储原已获取评论列表的数据
      let oldCom = this.commentList
      // 列表页码加1
      this.pageindex++
      //  发请求 => 加载新一页的评论列表数据
      getComments(this.newsId, this.pageindex).then(res => {
        if (res.status === 0) {
          // 新页码的评论列表
          let newCom = res.message
          // 再旧页码的后面追加数据
          this.commentList = [...oldCom, ...newCom]
          // 当加载到最后一页后，需隐藏'加载更多'，显示'没有更多了'
          if (res.message.length < 10) {
            this.moreButton = false
          }
        }
      })
    },
    /* 发表评论 */
    handlePublic () {
      if (this.content.trim(' ')) {
        // 通过qs 转化成 application/x-www-form-urlencoded 格式
        publicComment(this.newsId, qs.stringify({ content: this.content }))
          .then(res => {
            if (res.status === 0) {
            //  发请求 => 加载最新一页的评论列表数据
              getComments(this.newsId, 1).then(res => {
                if (res.status === 0) {
                  // 清空发表输入框
                  this.content = ''
                  // 发表成功提示
                  Toast({
                    message: '发表成功',
                    iconClass: 'iconfont icon-checkbox-marked-circ',
                    position: 'middle',
                    duration: 1000
                  })
                  // 最新页的评论列表
                  this.commentList = res.message
                }
              })
            }
          })
      } else {
        // 操作错误弹框提示
        Toast({
          message: '提交内容不可为空',
          iconClass: 'iconfont icon-checkbox-blank-circle-outline',
          position: 'middle',
          duration: 1000
        })
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.inputbox {
  border: 1px solid #999;
}
.comment h3 {
  font-weight: bold;
  margin: 10px 0;
  font-size: 14px;
}
.line {
  border-top: 1px solid #999;
  padding-top: 10px;
}
.commentbox{
  li:not(:last-child) {
    border-bottom: 1px solid #999;
    margin: 5px 0;
  }
  p {
    font-size: 14px;
  }
  .comment-content {
    color: #999;
    font-size: 14px;
  }
}
.comment-user, .comment-time {
  font-size: 12px;
  color: #26a2ff;
}
.comment-time {
  margin-left: 10px;
}
</style>
